import styled from 'styled-components'

export const ScrollWrapper = styled.div`
	position: relative;

	.left-arrow,
	.right-arrow {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		z-index: 9;
		cursor: pointer;
		${props => props.theme.mixin.boxShadow}

		position: absolute;
		top: 50%;
	}

	.left-arrow {
		left: 0;
		transform: translate(-50%, -50%);
	}

	.right-arrow {
		right: 0;
		transform: translate(50%, -50%);
	}

	.scroll-content {
		overflow: hidden;

		.slot {
			display: flex;

			transition: transform 250ms ease;
		}
	}
`
